<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文档的元素</title>
</head>
<body>
  <input type="text" id="i">
  <input type="button" value="添加H1" onclick="fun1()">
  <input type="button" value="添加图片" onclick="fun2()">
  <script type="text/javascript">
    function fun1() {
      let i = document.querySelector("#i");
      let h1 = document.createElement("h1"); // 创建一个h1标签
      // 把文本输入框中的内容放在h1标签中
      h1.innerText = i.value;
      // 把新创建的h1标签追加在body标签的末尾
      document.body.append(h1);
    }
    function fun2() {
      // 创建图片
      let img = document.createElement("img");
      // 设置图片的路径
      img.src = "image/1.png";
      img.width = 200;
      img.alt = "帅哥";
      // 把图片添加到body标签中
      document.body.append(img);
    }
  </script>
</body>
</html>